<template>
  <div class="my">
    <div class="my-top">
      <div class="my-top-user">
        <van-image round :src="shopimg || require('@/assets/my/user.png')" fit="cover" />
        <!-- 身份标识 -->
        <div class="my-top-user-sign">{{sign}}</div>
        <div class="my-top-user-uname">{{user_name}}</div>
      </div>
      <!-- 消息中心 -->
      <div class="my-top-msg">
        <!-- <van-icon :name="require('@/assets/my/msg.png')" dot @click="toMsg()" /> -->
      </div>
    </div>
    <div class="my-order">
      <van-grid class="my-order-items" :column-num="4" :border="false">
        <van-grid-item :icon="require('@/assets/my/wait-pay.png')" text="待发货" :to="{name:'sends',params:{active:0}}" />
        <van-grid-item :icon="require('@/assets/my/wait-send.png')" text="配送中" :to="{name:'sends',params:{active:1}}" />
        <van-grid-item :icon="require('@/assets/my/wait-receiving.png')" text="待收货" :to="{name:'sends',params:{active:2}}" />
        <van-grid-item :icon="require('@/assets/my/allorder.png')" text="全部订单" :to="{name:'sends',params:{active:3}}" />
      </van-grid>
    </div>
    <van-cell-group class="my-more" :border="false">
      <van-cell title="我的购买记录" is-link v-if="utype!=0" @click="buyHistory" />
      <van-cell title="设置起购金额" is-link v-if="utype==0" @click="showAmount" />
      <van-cell title="创建加盟商" is-link v-if="utype==0" @click="toCreate(4)" />
      <van-cell title="我的店铺" is-link @click="toShopInfo" v-if="utype==1" />
      <!-- <van-cell title="我的设备" is-link @click="toMyFacility" v-if="utype==4" /> -->
      <van-cell title="收货地址" is-link v-if="utype!=0" @click="gopath" />
      <van-cell title="退出账号" is-link @click="signout" />
    </van-cell-group>
    <van-popup v-model="setAmount" round closeable>
      <div class="set-amount">
        <van-field v-model="moneys" type="number" label="设置起购金额" placeholder="设置起购金额" :border="false" colon>
          <template #extra><span style="margin-left: 5px">元</span></template>
        </van-field>
        <van-button native-type="button" round color="#1bb89c" size="small" @click="setMoney">保存</van-button>
      </div>
    </van-popup>
    <div style="height:1.5rem;"></div>
    <TabBar :curr="3" />
  </div>
</template>

<script>
import TabBar from "@/components/TabBar";
import { Dialog, Toast } from 'vant';
export default {
  name: "My",
  data () {
    return {
      shopimg: '',
      user_name: '',
      setAmount: false,
      utype: '',
      sign: '',
      moneys: '',
      statusat: 0,
    }
  },
  methods: {
    gopath () {
      this.$router.push({ path: "/addresss", query: { type: 2 } });
    },
    buyHistory () {
      this.$router.push({ path: '/historys' });
    },
    toCreate (keys) {
      this.$router.push({ path: `/reg/${keys}` })
    },
    toMsg () {
      this.$router.push({ name: 'message' })
    },
    toShopInfo () {
      this.$router.push({ name: 'shop' })
    },
    toMyFacility (id) {
      // 根据加盟商ID获取设备列表
      this.$router.push({ name: 'facility', query: { id: id } })
    },
    showAmount () {
      this.setAmount = true
      this.$axios("/index/shopsmoney", {
        money: this.moneys //金额
      })
        .then((res) => {
          this.moneys = res.data.data
        })
        .catch((err) => {
          console.log(err);
        })
    },
    setMoney () {
      this.$axios("/index/shopsmoney", {
        handle: "ajax", //不填即返回数据
        money: this.moneys //金额
      })
        .then(() => {
          Toast.loading('设置成功')
          setTimeout(() => {
            this.setAmount = false
          }, 1000);
        })
        .catch((err) => {
          console.log(err);
        })
    },
    getUserInfo () {
      this.user_name = JSON.parse(localStorage.getItem("userInfo")).user.user_name
      this.utype = JSON.parse(localStorage.getItem("userInfo")).user.utype
      switch (this.utype) {
        case "0": this.sign = "总部"
          break;
        case "1": this.sign = "店长"
          break;
        case "4": this.sign = "加盟商"
          break;
      }
    },
    // 退出账号
    signout () {
      Dialog.confirm({
        title: '提示',
        message: '确认退出账号吗？',
        confirmButtonColor: '#1bb89c',
        width: '6rem',
      })
        .then(() => {
          Toast.loading('正在退出')
          // 清除token
          window.localStorage.clear()
          setTimeout(() => {
            // 跳转登录
            this.$router.push({ name: 'login' })
          }, 2000);
        })
        .catch(() => {
          // on cancel
        })
    },
    // 检测当前token,如果该账号审核未通过则请求接口并清除token
    checkattoken () {
      this.statusat = JSON.parse(localStorage.getItem("userInfo")).user.status // 1通过，2待审批，3拒绝
      if (this.statusat != 1) {
        this.$router.push({ name: 'login' })
        window.localStorage.clear()
      }
    },
  },
  created () {
    this.checkattoken()
    this.getUserInfo()
  },
  components: {
    TabBar
  },
}
</script>
<style lang="less" scoped>
.my {
  display: flex;
  flex-direction: column;
  &-top {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 450px;
    padding: 10px;

    background-color: #1bb89c;
    &-msg {
      position: absolute;
      top: 130px;
      right: 30px;
      /deep/ .van-icon__image {
        width: 0.7rem;
        height: 0.7rem;
      }
    }
    &-user {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 95%;
      height: 250px;
      padding: 20px 0;
      margin: 0 auto;
      /deep/.van-image__img {
        width: 1.71rem;
        height: 1.71rem;
        box-sizing: border-box;
        border: 3px solid #fff;
        background-color: #fff;
      }
      &-uname {
        font-size: 0.65rem;
        color: white;
      }
      &-sign {
        font-size: 25px;

        color: #000;
        background-color: #fff;
        border-radius: 50px;
        padding: 10px 20px;
        margin-top: -45px;
        z-index: 1;
      }
    }
  }
  &-order {
    display: flex;
    flex-direction: column;
    width: 90%;

    margin: -90px auto 50px;
    padding: 10px;
    z-index: 999;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 8px #f5f5f5;
    &-items {
      width: 100%;
      margin: 0 auto;
    }
    /deep/ .van-grid {
      width: 90%;
    }
    /deep/ .van-grid-item {
      width: 90%;
    }
    /deep/ .van-grid-item__content {
      background-color: transparent;
    }
  }
  &-more {
    /deep/ .van-cell__left-icon {
      margin-right: 15px;
      line-height: 40px;
    }
  }
  .set-amount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 8rem;
    height: 5rem;
    /deep/.van-field__label {
      width: 35%;
    }
    /deep/.van-field__value {
      width: 65%;
    }
    /deep/.van-button {
      width: 50%;
      margin: 50px auto 0;
    }
  }
}
</style>